<template>
  <div>
    <div class="quote">
      <div class="quoteTop">

        <h4 class="panel-heading">查询条件</h4>

        <div class="query">

          <Row>

            <Col span="6" class="input_info">
            <label>用户名</label>
            <Input size="small" style="width: 50%" v-model="queryObj.name"> </Input>
            </Col>

            <Col span="6" class="input_info">
            <label>手机号码</label>
            <Input size="small" style="width: 50%" v-model="queryObj.mobile"> </Input>
            </Col>

            <Col span="6" class="input_info">
            <label>推荐人名称</label>
            <Input size="small" style="width: 50%" v-model="queryObj.recommendName"> </Input>
            </Col>

            <Col span="6" class="input_info">
            <label>状态</label>
            <Select size="small" style="width: 50%" v-model="queryObj.state">
              <Option v-for="(item,index) in commonstate" v-text="item.name" v-bind:value="item.code"></Option>
            </Select>
            </Col>

            <Col span="6" class="input_info" v-if="myRole != 3">
            <label>团队</label>
            <Select filterable size="small" style="width: 50%" v-model="queryObj.teamId">
              <Option v-for="item in teamInfo" v-text="item.teamName" v-bind:value="item.id"></Option>
            </Select>
            </Col>

            <Col span="6" class="input_info" v-if="myRole != 3">
            <label>是否团队长</label>
            <Select size="small" style="width: 50%" v-model="queryObj.isLeader">
              <Option v-for="(item, index) in leaderSelect" v-text="item" v-bind:value="index"></Option>
            </Select>
            </Col>

            <Col span="12" class="input_info">
            <label style="min-width: 15%">注册日期</label>
            <!--<Date-picker size="small" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 60%"-->
            <!--@on-change="registerTimeChange" v-model="queryObj.registerTime"></Date-picker>-->

            <Date-picker size="small" type="date" placeholder="选择日期" style="width: 25%"
                         v-model="queryObj.startDate"></Date-picker>
            <Date-picker size="small" type="date" placeholder="选择日期" style="width: 25%"
                         v-model="queryObj.endDate"></Date-picker>

            </Col>

            <Col span="6" v-if="isComShow" class="input_info">
            <label>营业部</label>
            <Select size="small" style="width: 50%" v-model="queryObj.partnerId">
              <Option v-for="item in partnerComList" v-text="item.partnerName" v-bind:value="item.id"></Option>
            </Select>
            </Col>

            <Col span="6" class="input_info">
            <label>是否显示佣金</label>
            <Select size="small" style="width: 50%" v-model="queryObj.showCommission">
              <Option v-for="item in yesOrNo" v-bind:value="item.code" v-text="item.name"></Option>
            </Select>
            </Col>

            <Col span="6" class="input_info">
            <label>允许登陆网页</label>
            <Select size="small" style="width: 50%" v-model="queryObj.loginPcFlag">
              <Option v-for="item in yesOrNo" v-bind:value="item.code" v-text="item.name"></Option>
            </Select>
            </Col>

          </Row>

          <div style="height: 10px;"></div>

          <Row>

            <Col span="24" style="text-align: center">
            <Button size="small" @click="query" type="primary">查 询</Button>
            <Button size="small" @click="reset" type="error">重 置</Button>
            <Button size="small" @click="newSaleman" type="success" v-if="myRole == 1">新 增</Button>
            </Col>

          </Row>
        </div>
      </div>
      <div>
      </div>
    </div>

    <div class="quote">
      <div class="quoteCenten">
        <table cellspacing="0">
          <thead>
          <tr>
            <th>No.</th>
            <th>用户名</th>
            <th>手机号码</th>
            <!--<th>营业部</th>-->
            <th>投保区域</th>
            <th>推荐人</th>
            <th>设备类型</th>
            <th>版本号</th>
            <th v-if="dir.teamName != 3">团队</th>
            <th v-if="dir.isLeader != 3">是否团队长</th>
            <th>级别</th>
            <th>状态</th>
            <th>是否显示佣金</th>
            <th>允许登陆网页</th>
            <th>注册时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in items">
            <td v-text="(pageNumber-1)*pageSize + index+1"></td>
            <td v-text="item.name"></td>
            <td v-text="item.mobile"></td>
            <!--<td v-text="item.partnerName"></td>-->
            <td v-text="item.insuredAreaName"></td>
            <td v-text="item.recommendName+' -'+item.recommendMobile"></td>
            <td v-text="item.phoneType"></td>
            <td v-text="item.versionCode"></td>
            <td v-if="dir.teamName != 3" v-text="item.teamName"></td>
            <td v-if="dir.isLeader != 3" v-text="item.isLeader==='N'? '否':'是'"></td>
            <td v-text="item.levelName"></td>
            <td v-text="item.state === '1'? '可用': '不可用'"></td>
            <td v-text="item.showCommission"></td>
            <td v-text="item.showLoginPcFlag"></td>
            <td v-text="item.createTime"></td>
            <td>

              <a href="javascript:void(0)" @click="callDelete(item)" v-if="isShowDelete">删除</a>

              <a href="javascript:void(0)" @click="editSaler(item.id)">
                编辑
              </a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="quote">
      <div class="quoteB">
        <div class="page">
          <Page style="margin: 0 auto" :total="pageTotal" :current="pageNumber" @on-change="cutPage"
                @on-page-size-change="cutSize" show-elevator show-total show-sizer></Page>
        </div>
      </div>

    </div>
  </div>
</template>

<script type="text/javascript">
  import api from '../../utils/api.js';
  //  import commonCode from '../../assets/json/common_code.json';
  import {queryROLE, queryPartnerId, queryPartnerName, queryTeamId} from '../../utils/common.js';
  import reqDic from '../../utils/requestDictionary.js';

  export default {
    data: function () {
      return {
        pageSize: 10,
        pageNumber: 1,
        pageTotal: '',

        queryObj: {
          mobile: "",
          name: "",
          recommendName: "",
          state: "",
          teamId: queryROLE() != 3 ? "" : queryTeamId(),
          levelId: "",

          startDate: '',
          endDate: '',
          registerTime: '',

          isLeader: '',

          showCommission: '',
          loginPcFlag: ''

        },

        commonstate: [],

        items: [],

        levelInfo: [],
        teamInfo: [],

        //是否团长
        leaderSelect: [],

        //
        yesOrNo: [],

        //角色
        myRole: '',
        //营业部
        partnerComList: [],
        //删除按钮
        isShowDelete: false,
        isComShow: false,

        dir: {
          "teamName": 2,
          "isLeader": 2,
        }

      }
    },
    created: function () {

      this.pageSize = 10;
      this.pageNumber = 1;

      this.commonstate = reqDic.QueryDictionary("COMMONSTATE");
      this.commonstate.unshift({'code': '', 'name': '请选择'});
      this.levelInfo = reqDic.QueryDictionary("PARTNERSTARLEVEL");
      this.levelInfo.unshift({'code': '', 'name': '请选择'});
      this.leaderSelect = reqDic.QueryDictionary("ISLEADER");
      this.yesOrNo = reqDic.QueryDictionary("YESORNO"),
        this.yesOrNo.unshift({'code': '', 'name': '请选择'});

        this.permissionControl();

    },
    activated: function () {

      if (this.myRole == 1) {
        this.getPartnerComList();
      } else {
        this.allTeamInfo();
      }
    },
    methods: {

      callDelete: function (item) {

        var self = this;

        var config = {
          "onOk": function () {
            console.log("ok");
            self.deleteSaler(item.id);
          },
          "content": "确定删除业务员【" + item.name + "】么",
          "title": "删除业务员"
        }

        this.$Modal.confirm(config);

      },

      //权限控制的方法
      permissionControl: function () {
        this.myRole = queryROLE();

        if (this.myRole == 1) {
          this.isComShow = true;
          this.isShowDelete = true;
        } else {
          this.isComShow = false;
          this.isShowDelete = false;
        }

        if (this.myRole == 3) {
          this.dir = {
            "teamName": 3,
            "isLeader": 3,
          }
        }

      },

      query: function () {
        this.pageSize = 10;
        this.pageNumber = 1;
        this.allTeamInfo();
      },

      reset: function () {
        this.queryObj = {
          mobile: "",
          name: "",
          recommendName: "",
          state: "",
          teamId: queryROLE() != 3 ? "" : queryTeamId(),
          levelId: "",

          startDate: '',
          endDate: '',
          registerTime: '',

          isLeader: '',

          showCommission: '',
          loginPcFlag: ''
        };
      },

      cutPage: function (pageNumber) {
        this.pageNumber = pageNumber;
        this.allTeamInfo();
      },

      cutSize: function (pageSize) {
        this.pageSize = pageSize;
        this.allTeamInfo();
      },

      //编辑业务员
      editSaler: function editSaler(id) {
        this.$router.push("salemenManage/" + id);
      },

      //所有团队信息
      allTeamInfo: function () {
        var self = this;
          let data={ state: ""}
          api.getAllTeamInfo(data).then(res => {
          self.teamInfo = res.body.data;
          self.teamInfo.unshift({'id': '', 'teamName': '请选择'});
          self.getPageQuery();
        })
      },

      //营业部
      getPartnerComList: function () {
        var self = this;
        api.getPartnerComList().then(res => {
          self.partnerComList = res.body.data;
          self.partnerComList.unshift({'id': '', 'partnerName': '请选择'});
          this.allTeamInfo();
        });
      },

      //获取业务员列表
      getPageQuery: function () {
        var self = this;

        api.getSalesManagePageQuery(this.pageNumber, this.pageSize, this.queryObj, this.total).then((res) => {
          var data = res.body.data;
          this.pageTotal = data.total;

          data.rows.forEach(function (item) {

            item.levelName = reqDic.QueryDictionary("PARTNERSTARLEVEL", item.levelId, "name");

//            item.createTime = item.createTime.substring(0, 10);

            //是否允许登陆网页
            item.showLoginPcFlag = reqDic.QueryDictionary("YESORNO", item.loginPcFlag);

            item.showCommission = reqDic.QueryDictionary("YESORNO", item.showCommission);

          });

          this.items = data.rows;
        })
      },


      registerTimeChange: function (time) {
        console.log("日期变动", time.length);

        if (time[0] !== '') {
          this.queryObj.startDate = this.formatDate(time[0]);
          this.queryObj.endDate = this.formatDate(time[1]);
        }

      },

      //删除业务员
      deleteSaler: function (id) {
        var self = this;
        api.deleteSaleman(id).then(res => {

          if (res.body.state === "1") {
            self.$Message.success(res.body.message.info);
          } else {
            self.$Message.error(res.body.message.info);
          }
          this.getPageQuery();
        })


      },

      //格式化时间
      formatDate: function (item) {
        var date = new Date(item);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var result = y + '-' + m + '-' + d;
        console.log(result);

        return result;
      },

      //新增
      newSaleman: function () {
        this.$router.push("salemenManage/-1");
      }
    },

  }
</script>
